<template>
  <div>
    <ul class="alll">
      <li class="li">
        <span v-if="nm.all"
          ><span>评论</span>
          <span>{{ nm.all }}条</span>
          <span>好评率{{ Number(nm.good / nm.all) * 100 + '%' }}</span>
        </span>
        <span v-if="!nm.all">暂无评论 </span>
        <van-icon name="arrow" />
      </li>
      <li v-if="!nm.all" class="li">
        <span v-if="!nm.all">网友讨论圈 </span>
        <span>查看全部<van-icon name="arrow"></van-icon></span>
      </li>
      <li v-if="!nm.all" class="p">
        <h4 class="h">暂无讨论信息，去发起话题吧</h4>
        <h4>发起话题</h4>
      </li>
      <li class="cli" v-for="item in listData" v-bind:key="item.index">
        <div class="one">
          <img v-bind:src="item.user_picture" alt="" />
          <div class="content">
            <span>{{ item.user_name }}</span>
            <span class="date">
              <span class="icon">
                <van-icon name="star" />
                <van-icon name="star" />
                <van-icon name="star" />
                <van-icon name="star" />
                <van-icon name="star" />
              </span>
              <span class="time">{{ item.add_time }}</span>
            </span>
          </div>
        </div>
        <div class="two">{{ item.content }}</div>
      </li>
    </ul>
  </div>
</template>
<script>
import { onMounted } from 'vue'
import store from '../../../store/index.js'
export default {
  data() {
    return {
      listData: [],
      nm: '',
    }
  },
  mounted() {
    this.goods()
    this.num()
  },
  methods: {
    goods() {
      let value = Number(location.href.split('=', 2)[1])
      this.$store
        .dispatch({
          type: 'getGoods',
          goods_id: value,
        })
        .then((data) => {
          this.listData = data
          //   console.log(this.listData)
        })
    },
    num() {
      let value = Number(location.href.split('=', 2)[1])
      this.$store
        .dispatch({
          type: 'getNum',
          goods_id: value,
        })
        .then((data) => {
          this.nm = data
        })
    },
  },
}
</script>
<style lang="less" scoped>
.li {
  display: flex;
  justify-content: space-between;
  font-size: 1.4rem;
  font-weight: 700;
  padding: 1.1rem;
  padding-left: 1rem;
  span {
    span {
      margin-left: 1.5rem;
    }
  }
}
.p {
  display: flex;
  flex-direction: column;
  justify-content: center;

  h4 {
    text-align: center;
    color: #000;
    font-weight: 400;
    font-size: 1.4rem;
    margin: 0;
  }
  .h {
    margin: 1.5rem 0;
  }
}
.cli {
  padding: 1.4rem 0;
  display: flex;
  flex-direction: column;

  .two {
    margin: 1.3rem 1.1rem 0;
  }
  .one {
    display: flex;
    padding: 0 1.1rem;
    img {
      flex: none;
      width: 3.4rem;
      height: 3.4rem;
      border-radius: 50%;
      background-color: #ccc;
    }
    .content {
      margin-left: 1rem;
      flex: auto;
      display: flex;
      flex-direction: column;
      span {
        // width: auto;
        display: flex;
        align-items: center;
        flex: auto;
      }
      .date {
        display: flex;
        justify-content: space-between;
        .time {
          justify-content: flex-end;
        }
        .icon {
          color: red;
        }
      }
    }
  }
}
</style>
